<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form>
      <a-form-item
          :label="$t('chooseImage')"
          :labelCol="{span: 7}"
          :wrapperCol="{span: 10}"
      >
        <a-upload
            :multiple="false"
            :fileList="fileList"
            :beforeUpload="beforeUpload"
            :customRequest="customRequest"
        >
          <a-button>
            <a-icon type="upload"/>
            上传
          </a-button>
        </a-upload>

      </a-form-item>
      <a-form-item
          :label="$t('content')"
          :labelCol="{span: 7}"
          :wrapperCol="{span: 10}"
      >
        <a-textarea v-model="value" rows="4" :placeholder="''"/>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import {METHOD, request} from "../../utils/request";

export default {
  i18n: require('./basic/i18n'),
  data() {
    return {
      value: '',
      fileList: []
    };
  },
  methods: {
    beforeUpload(file, fileList) {
      // file：上传单个文件时候的文件内容，fileList：上传多个文件时的文件内容组成的数组
      // 1、控制文件数量
      if (this.fileList.length + fileList.length > 10) {
        this.$message.warning('超过文件上传数量限制')
        // 设置上传的文件为错误状态
        file.status = 'error'
        return false
      }
      // 2、控制上传的文件大小
      if (file.size > 1024 * 1024) {
        this.$message.warning('文件大小超过最大限度1G')
        file.status = 'error'
        return false
      }
      // 3、控制上传文件不能为空
      if (file.size === 0) {
        this.$message.warning('所选信息中存在空文件或目录，请重新选择')
        file.status = 'error'
        return false
      }
      // 4、控制已上传文件不重复
      this.fileList.map(item => {
        if (item.name === file.name) {
          this.$message.warning('不允许重复上传')
          file.status = 'error'
          return false
        }
      })
      // 5、控制上传文件的类型 arr是上传类型的白名单
      const type = file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase()
      const arr = ['.jpg', '.png', '.jpeg']
      if (arr.includes('.' + type)) {
        return true
      } else {
        this.$message.warning(`不支持以 .${type} 扩展类型的文件或图片上传!`)
        file.status = 'error'
        return false
      }
    },
    // 自定义上传，可以自定义上传接口，不用通过action属性，还是非常灵活的
    customRequest(file) {
      // file 是上传的文件 其内容会在放在下面截图中
      // 后端需要接受的参数是 formData数据，
      const form = new FormData()
      form.append('file', file.file)
      // uploadFile 我自己的接口
      request('/api/ocr/upload', METHOD.POST, form,
          {'Content-Type': 'multipart/form-data'}).then(res => {
        if (res.data.code == 200) {
          // 调用组件内方法, 设置为成功状态
          file.onSuccess(res, file.file)
          file.status = 'done'
          this.$message.success(`${file.file.name} 上传成功.`)
          this.value = res.data.data
        } else {
          file.onError()
          file.status = 'error'
          this.$message.error(`${file.file.name} 上传失败.`)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
